<template>
    <div>
        <CommonTablePageComponent>
            <template #funBar>
                <FunctionBarComponent @select="getAllCategory" @add="openAddCategory" @delete="deleteData">
                </FunctionBarComponent>
            </template>
            <template #table>
                <el-table :data="categoryList" max-height="600"
                          table-layout="fixed" border stripe :style="{boxShadow:`var(--el-box-shadow)`}"
                          @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" align="center" />
                    <el-table-column type="expand" label="详情" fixed align="center" />
                    <!--            <el-table-column show-overflow-tooltip label="分类id" fixed align="center" prop="catId" />-->
                    <el-table-column show-overflow-tooltip label="分类名称" align="center" prop="name" />
                    <!--            <el-table-column show-overflow-tooltip label="父分类id" align="center" prop="parentCid" />-->
                    <el-table-column show-overflow-tooltip label="层级" align="center" prop="catLevel" />
                    <el-table-column show-overflow-tooltip label="是否显示" align="center" prop="showStatus">
                        <template #default="scope">
                            <el-tag
                                v-if="scope.row.showStatus===DictionaryConstants.ProductConst.IS_SHOW_CATEGORY.TRUE.value"
                                type="success">
                                {{ DictionaryConstants.ProductConst.IS_SHOW_CATEGORY.TRUE.label }}
                            </el-tag>
                            <el-tag v-else type="danger">
                                {{ DictionaryConstants.ProductConst.IS_SHOW_CATEGORY.FALSE.label }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip label="排序" align="center" prop="sort" />
                    <el-table-column show-overflow-tooltip label="图标" align="center" prop="icon">
                        <template #default="scope">
                            <el-image
                                style="width: 100px; height: 50px"
                                :src="scope.rowicon"
                                :zoom-rate="1.2"
                                :max-scale="7"
                                :min-scale="0.2"
                                :initial-index="4"
                                fit="contain"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip label="计量单位" align="center" prop="productUnit" />
                    <el-table-column show-overflow-tooltip label="商品数量" align="center" prop="productCount" />
                    <el-table-column show-overflow-tooltip fixed="right" label="操作" align="center"
                                     class-name="small-padding fixed-width">
                        <template #default="scope">
                            <el-button size="large" type="warning" @click="updateRow(scope.row)">
                                <template #icon>
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-xiugai"></use>
                                    </svg>
                                </template>
                                修改
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <template #pageBar>
                <el-pagination
                    v-model:current-page="PageData.currentPage"
                    v-model:page-size="PageData.pageCount"
                    :page-sizes="PageData.pageSizes"
                    :disabled="false"
                    :background="true"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="0"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </template>
        </CommonTablePageComponent>
        <AddOrUpdateWindowComponent v-model:pro="dialogTableVisible"></AddOrUpdateWindowComponent>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { CategoryDataModel, type GetCategoryParamsModel } from "@/model/HomePge/Product/ProductCategoryModel.ts";
import { CategoryApi } from "@/api/Product/CategoryApi.ts";
import { TablePageModel } from "@/model/PageModel.ts";
import FunctionBarComponent from "@/components/FunctionBarComponent.vue";
import DictionaryConstants from "@/const/DictionaryConstants.ts";
import AddOrUpdateWindowComponent from "@/pages/product/category/AddOrUpdateWindowComponent.vue";
//新增或删除组件数据
const dialogTableVisible = ref(false);
//表单数据
const categoryList = ref<Array<CategoryDataModel>>([]);
//分页组件数据
const PageData = ref<TablePageModel>({
    currentPage: 1,
    pageCount: 1,
    pageSizes: [10, 20, 30, 40],
    size: 1,
    total: 0,
});
//请求参数
const GetCategoryParamsModel = ref<GetCategoryParamsModel>({
    pageNumber: 1,
    pageSize: 10,
    keyword: "",
});
/**
 * 打开新增分类弹窗
 */
const openAddCategory = () => {
    dialogTableVisible.value = true;
};
/**
 * 删除数据
 */
const deleteData = () => {
};
/**
 * 获取所有分类
 */
const getAllCategory = (data?: string) => {
    GetCategoryParamsModel.value.keyword = data;
    // console.log(GetCategoryParamsModel.value);
    CategoryApi.getAllCategory(GetCategoryParamsModel.value)
        .then(res => {
            // console.log(`res---------->${JSON.parse(res) }`);
            categoryList.value = res.data;
        });
    // console.log(categoryList.value);
};
/**
 * 修改一行数据
 * @param row
 */
const updateRow = (row) => {
};

const handleSelectionChange = (val: any) => {
    console.log(val);
};
const handleSizeChange = () => {

};
const handleCurrentChange = () => {

};
/**
 * 页面加载
 */
onMounted(() => {
    //1获取所有数据
    getAllCategory();
});
</script>

<style scoped lang="scss">

</style>